<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户信息</title>
    <link rel="stylesheet" href="../layui/css/layui.css">
    <style>
        /*重写layui单选框颜色*/
        .layui-form-radio>i:hover, .layui-form-radioed>i{
            color: #23262E;
        }
        body{
            padding-top: 20px;
            padding-left: 20px;
        }
    </style>
</head>
<body>
<form class="layui-form layui-form-pane" action="">
    <div class="layui-form-item">
        <label class="layui-form-label">用户名</label>
        <div class="layui-input-inline">
            <input type="text" id="uName" name="uName" lay-verify="required" placeholder="用户名" autocomplete="off" class="layui-input" disabled="disabled">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">年龄</label>
        <div class="layui-input-inline">
            <input type="text" id="uAge" name="uAge" lay-verify="age" placeholder="18" autocomplete="off" class="layui-input" disabled="disabled">
        </div>
    </div>
    <div class="layui-form-item" pane="">
        <label class="layui-form-label">性别</label>
        <div class="layui-input-block">
            <input type="radio" class="uSex" name="uSex" value="男" title="男" disabled="disabled">
            <input type="radio" class="uSex" name="uSex" value="女" title="女" disabled="disabled">
            <input type="radio" class="uSex" name="uSex" value="未知" title="未知" disabled="disabled">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">喜欢的游戏</label>
        <div class="layui-input-inline">
            <input type="text" name="uGame1" lay-verify="gameName" placeholder="" autocomplete="off" class="layui-input uGames" disabled="disabled" >
        </div>
        <div class="layui-input-inline">
            <input type="text" name="uGame2" lay-verify="gameName" placeholder="" autocomplete="off" class="layui-input uGames" disabled="disabled" >
        </div>
        <div class="layui-input-inline">
            <input type="text" name="uGame3" lay-verify="gameName" placeholder="" autocomplete="off" class="layui-input uGames" disabled="disabled">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="button" class="layui-btn" lay-filter="user_info" id="edit_btu" style="background-color: #23262E; ">修改信息</button>
        </div>
    </div>
</form>

<script src="../layui/layui.js"></script>
<script src="../layui/lay/modules/jquery-3.3.1.js"></script>
<script src="../layui/jquery.cookie.js"></script>
<script>
    layui.use(['layer', 'form','element'], function () {
        var layer = layui.layer
            , form = layui.form;
        var element = layui.element;


        var user=null;
        var likeGames=null;

        //登陆验证
        $(document).ready(function () {
            var loginId_p=$.cookie('loginId');//获取cookie
            if (loginId_p==null||loginId_p=='null'){//判断是否登陆 =null=没登陆
                layer.msg("您还未登录");
                setTimeout(function () {
                    //关闭当前层
                    var index = parent.layer.getFrameIndex(window.name); //得到当前iframe层的索引
                    parent.layer.close(index); //执行关闭
                },500);
                setTimeout(function () {
                    window.location.replace("/games_info_sys");//导航到主页
                },500);
            }else if(atob(loginId_p).indexOf("Logined:")==0){//登陆状态中
                var uName=utf8to16(atob(loginId_p)).substring(8,utf8to16(atob(loginId_p)).length);//解密字符串获取用户名
               $.post("/games_info_sys/publicUser/selectUserInfoByName.do",{uName: uName},function (res) {
                   user=res.data;//返回获取到的用户信息
                   $('#uName').attr("placeholder",user.uName);
                   $('#uAge').attr("placeholder",user.uAge);
                   if (user.uSex=="男"){
                       $($('.uSex')[0]).attr("checked","checked");
                   }else if(user.uSex=="女"){
                       $($('.uSex')[1]).attr("checked","checked");
                   }else if(user.uSex=="未知"||res.uSex==null){
                       $($('.uSex')[2]).attr("checked","checked");
                   }
                   form.render('radio');
                   likeGames=getLikeGames(user.uGames);//获取到喜爱游戏
                   $($('.uGames')[0]).attr("placeholder",likeGames.likeGame1);//赋给文本框
                   $($('.uGames')[1]).attr("placeholder",likeGames.likeGame2);
                   $($('.uGames')[2]).attr("placeholder",likeGames.likeGame3);
               })
            }
        })

        //获取喜欢的三个游戏,用^作为分隔符
        function getLikeGames(likeGames){
            var likeGame1=likeGames.substring(0,likeGames.indexOf("^"));
            var likeGame2=likeGames.substring((likeGames.indexOf("^")+1),likeGames.lastIndexOf("^"));
            var likeGame3=likeGames.substring((likeGames.lastIndexOf("^")+1),likeGames.length);
            return {likeGame1:likeGame1,likeGame2:likeGame2,likeGame3:likeGame3};
        }

        //点击修改按钮
        $('#edit_btu').bind('click',function () {
            $('#uName').attr("disabled",null);
            $('#uName').attr("value",user.uName);
            $('#uAge').attr("disabled",null);
            $('#uAge').attr("value",user.uAge);
            $('.uSex').attr("disabled",null);
            $('.uGames').attr("disabled",null);
            $($('.uGames')[0]).attr("value",likeGames.likeGame1);//赋给文本框
            $($('.uGames')[1]).attr("value",likeGames.likeGame2);
            $($('.uGames')[2]).attr("value",likeGames.likeGame3);
            form.render('radio');
            setTimeout(function () {
                $('#edit_btu').attr("lay-submit","");
                $('#edit_btu').text("确认修改");
                $('#edit_btu').after("<button type=\"reset\" class=\"layui-btn\" style=\"background-color: #23262E; \">重置</button>");
            },200);
            $(this).unbind('click');//取消事件绑定
        })
        form.on('submit(user_info)', function(data){
            var uGames=data.field.uGame1+"^"+data.field.uGame2+"^"+data.field.uGame3
            var users={uId:user.uId,uName:data.field.uName,uAge:data.field.uAge,uSex:data.field.uSex,uGames}
            $.post("/games_info_sys/publicUser/updateUserInfo.do",users,function (res) {
                if (res.data==1){
                    layer.msg("修改成功");
                    setTimeout(function () {
                        //关闭当前层
                        var index = parent.layer.getFrameIndex(window.name); //得到当前iframe层的索引
                        parent.layer.close(index); //再执行关闭
                    },500);
                }else {
                    layer.msg("修改失败");
                }
            })

            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
        //自定义验证规则
        form.verify({
            //不能输入^且长度大于10的字符
            gameName:function (value) {
                if (value.indexOf("^")>=0){
                    return "请勿输入非法字符";
                }else if(value.length==0){
                    return "喜欢的游戏不能为空";
                }else if(value.length>10){
                    return "游戏名称不能大于10个字";
                }
            },
            age:[/^(?:[1-9][0-9]?|1[01][0-9]|120)$/,'年龄不在有效值内']
        });

        //编码转换utf8转utf-16
        function utf8to16(str) {
            var out, i, len, c;
            var char2, char3;

            out = "";
            len = str.length;
            i = 0;
            while(i < len) {
                c = str.charCodeAt(i++);
                switch(c >> 4) {
                    case 0: case 1: case 2: case 3: case 4: case 5: case 6: case 7:
                        // 0xxxxxxx
                        out += str.charAt(i-1);
                        break;
                    case 12: case 13:
                        // 110x xxxx   10xx xxxx
                        char2 = str.charCodeAt(i++);
                        out += String.fromCharCode(((c & 0x1F) << 6) | (char2 & 0x3F));
                        break;
                    case 14:
                        // 1110 xxxx  10xx xxxx  10xx xxxx
                        char2 = str.charCodeAt(i++);
                        char3 = str.charCodeAt(i++);
                        out += String.fromCharCode(((c & 0x0F) << 12) |
                            ((char2 & 0x3F) << 6) |
                            ((char3 & 0x3F) << 0));
                        break;
                }
            }
            return out;
        }

    });
</script>
</body>
</html>